<template>
	<!-- 业务配置管理/维修项目管理 -->
	<div class="heightMax order publicbox" v-loading='loadingTable'>
		<div class="header">
			<el-row :gutter="10">
				<el-col :span="4">
					<el-input size="mini" @keyup.enter.native="getList(1)" placeholder="请输入维修名称或内容" clearable v-model="query"></el-input>
				</el-col>
				<el-col :span="4">
					<el-select filterable remote reserve-keyword :remote-method="remoteMethod" :loading="selecteLoading" placeholder="请选择维修类型"
					 size="mini" clearable v-model="mainType">
						<el-option v-for="item in mainTypeArr" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="1.5">
					<el-button type="primary" icon="el-icon-search" @click='getList(1)' size="mini">搜索</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button icon="el-icon-delete" @click='reset' size="mini">重置</el-button>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :span="1.5">
					<el-button type="primary" :disabled="disableBtn " @click='operation(2)' v-if='complieBtnShow' size="mini">编辑</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button type="danger" :disabled="deletedBtn   " @click='deleteList(1)' v-if='deleteBtnShow' size="mini">删除</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button type="success" :disabled="disableBtnDetail" @click='operation(3)' v-if="readDataShow" size="mini">详情</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button type="primary" @click='showDialog' :disabled="workMoneyDis" size="mini">工时价</el-button>
				</el-col>
				<!-- <el-col :span="1.5">
					<el-button type="danger" :disabled="batchDisable" @click='deleteList(2)' v-if="role != 0">批量删除</el-button>
				</el-col> -->
				<el-button type="success" class='fr' @click='operation(1)' v-if="addBtnShow" size="mini">添加</el-button>
				<el-button type="primary" class='fr' v-if="readDataShow" size="mini">导出</el-button>
				<el-button type="primary" class='fr' v-if="readDataShow" size="mini">导入</el-button>
				<!-- @click="dialogVisible = true" -->
			</el-row>
		</div>
		<!-- 表格 -->
		<div class="tableBox">
			<vueScroll>
				<el-table :data="tableData" highlight-current-row ref="moviesTable" @row-click="rowClick" @select-all="selectChange"
				 @selection-change="selectChange" style="width: 100%" border header-row-class-name='tableHeader'>
					<el-table-column type="index" class="over" fixed>
					</el-table-column>
					<el-table-column type="selection" min-width="50" fixed>
					</el-table-column>
					<el-table-column label="维修项目名称">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
								<span class="speSpan">{{scope.row.name}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="维修类型">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.repair_type_name" placement="top">
								<span class="speSpan">{{scope.row.repair_type_name}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="维修内容">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.content" placement="top">
								<span class="speSpan">{{scope.row.content}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="维修费用(元)">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.costs ? scope.row.costs.toString() : ''" placement="top">
								<span class="speSpan">{{scope.row.costs}} </i></span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="备注">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.comment" placement="top">
								<span class="speSpan">{{scope.row.comment}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页器 -->
				<div class="pag">
					<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
					 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</vueScroll>
		</div>
		<AddList v-if='addAndCompileShow' :rowId='rowId' :isChangeList='isChangeList' :addAndCompileShow='addAndCompileShow'
		 :changeAddTitle='changeAddTitle' @closeAddDialog='closeAddDialog' @upDateList='upDateList'></AddList>
		<dialogComp :dialogVisible='dialogCompShow' title='修改工时价格' newWidth='45%' :ensureLoading='dialogEnsureLoading'
		 @closeDialog='closeDialog' @submitDialog='submitDialog'>
			<el-form slot='content' ref='form' :rules="rules" :model='form' label-width="130px" size="mini" class="newForm">
				<el-row :gutter="20">
					<el-col :span='10'>
						<el-form-item label="工时价格" prop="price">
							<el-input-number v-model="form.price" :min="0" :precision="2" label="请输入工时价格"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="1">
						<span style="margin-top: 5px;display: inline-block;">元</span>
					</el-col>
				</el-row>
			</el-form>
		</dialogComp>
	</div>
</template>

<script>
	import AddList from './addList.vue'
	import dialogComp from '@/components/publicComponents/dialogComp.vue'
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		AllLoading
	} from "@/common.js";
	export default {
		components: {
			AddList,
			dialogComp
		},
		mounted() {
			this.getList()
			this.getMainType()
			this.getPermition()
			this.getworkHourMoney()
		},
		data() {
			return {
				form: {
					price: 0,
				},
				workMoneyDis:true,
				page: 1,
				page_size: 10,
				total: 1,
				rowId: '',
				tableData: [],
				disableBtn: true,
				batchDisable: true,
				checkBoxArr: [],
				query: '',
				loadingTable: true,
				mainType: '',
				mainTypeArr: [],
				selecteLoading: false,
				selectedQuery: '',
				isChangeList: true,
				disableBtnDetail: true,
				addAndCompileShow: false,
				deletedBtn: true,
				pidsArr: [],
				addBtnShow: false,
				complieBtnShow: false,
				deleteBtnShow: false,
				readDataShow: false,
				dialogEnsureLoading: false,
				dialogCompShow: false,
				rules: {
					price: [{
						required: true,
						message: '工时价格不能为空',
						trigger: 'blur'
					}, ]
				}
			}
		},
		computed: {
			role() {
				if (localStorage.role) {
					return JSON.parse(localStorage.role).id
				} else {
					return ''
				}
			},
			weiXiuArr() {
				if (localStorage.yeWu) {
					let arr = JSON.parse(localStorage.yeWu).list
					return arr.filter((item) => {
						return item.name == '维修项目'
					})
				} else {
					return []
				}
			}
		},
		methods: {
			//获取当前工时价格
			getworkHourMoney(){
				let url = '/user/hour/price/'
				axiosGet(url,'',(res)=>{
					if(res.code == 0){
						this.form.price = res.detail.hour_price
						this.workMoneyDis = !res.detail.can_be_modify
					}else{
						this.$message.error(res.detail.results)
					}
				})
			},
			getPermition() {
				if (this.weiXiuArr.length != 0) {
					if (this.weiXiuArr[0].pids) {
						this.pidsArr = this.weiXiuArr[0].pids
					}
				}
				if (this.pidsArr.length > 0) {
					this.pidsArr.map((item) => {
						if (item.desc == 'get') {
							this.readDataShow = true
						}
						if (item.desc == 'put') {
							this.complieBtnShow = true
						}
						if (item.desc == 'delete') {
							this.deleteBtnShow = true
						}
						if (item.desc == 'post') {
							this.addBtnShow = true
						}
					})
				}
			},
			//获取维修类型
			getMainType() {
				let params = {
					page: 1,
					page_size: 30,
					query: this.selectedQuery,
				}
				axiosGet('/manu/elevator/type/', params, (res) => {
					this.selecteLoading = false
					if (res.code == 0) {
						this.mainTypeArr = res.detail.results
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//维修类型过滤
			remoteMethod(query) {
				if (query) {
					this.selecteLoading = true;
					this.selectedQuery = query
					this.getMainType()
				} else {
					this.selectedQuery = ''
					this.getMainType()
				}
			},
			//获取列表
			getList(val) {
				if(val){
					this.page = 1
					this.page_size = 10
				}
				this.loadingTable = true
				let params = {
					page: this.page,
					page_size_count: this.page_size,
					repair_type: this.mainType,
					key_words: this.query
				}
				axiosGet('/manu/elevator/content/', params, (res) => {
					this.loadingTable = false
					if (res.code == 0) {
						this.total = res.detail.count
						this.tableData = res.detail.results
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//清空搜索条件
			reset() {
				this.page = 1
				this.page_size = 10
				this.query = ''
				this.mainType = ''
				this.getList()
			},
			//选中当前行
			rowClick(row, column, event) {
				this.$refs.moviesTable.toggleRowSelection(row)


			},
			//页数变化
			handleCurrentChange(page) {
				this.page = page
				this.getList()
			},
			//数量变化
			handleSizeChange(size) {
				this.page_size = size
				this.getList()
			},
			//选择数量编码
			selectChange(res) {
				setTimeout(() => {
					console.log(res)
					if (res.length == 1) {
						this.disableBtn = false
						this.batchDisable = true
						this.disableBtnDetail = false
						this.isChangeList = res[0].can_be_modified
						if (this.role == 0) {
							this.deletedBtn = false
						} else {
							this.deletedBtn = !res[0].can_be_modified
						}
						this.rowId = res[0].id
					} else {
						this.disableBtn = true
						this.batchDisable = true
						this.disableBtnDetail = true
						this.deletedBtn = true
						console.log(this.deletedBtn)
					}
					this.checkBoxArr = res
				}, 0)
			},
			//添加/编辑/详情
			operation(value) {
				this.addAndCompileShow = true
				this.changeAddTitle = value
				if (value == 1) {
					this.isChangeList = false
				}
				if (value == 2) {
					this.isChangeList = !this.checkBoxArr[0].can_be_modified
				}
			},
			//关闭添加弹窗
			closeAddDialog() {
				this.addAndCompileShow = false
			},
			//更新列表
			upDateList() {
				this.addAndCompileShow = false
				this.getList()
			},
			//删除
			deleteList(value) {
				this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let url = '/manu/elevator/content/' + this.rowId
					axiosDelete(url, {}, (res) => {
						if (res.code == 0) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.getList()
						} else {
							this.$message.error(res.detail.result)
						}
					})
				}).catch(() => {});
			},
			showDialog() {
				this.dialogCompShow = true
			},
			closeDialog() {
				this.dialogCompShow = false
			},
			submitDialog() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						let url = '/user/hour/price/'
						let data = {
							hour_price:this.form.price
						}
						axiosPost(url, data, (res) => {
							if (res.code == 0) {
								this.$message.success('操作成功')
								this.closeDialog()
							} else {
								this.$message.error(res.detail.results)
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				})
			},
		}
	}
</script>

<style>

</style>
